<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算器</title>
<style>
body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding-top: 50px;
    background-color: #f2f2f2;
}
.calculator {
    display: inline-block;
    text-align: left;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
    margin: 0 auto;
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 5px;
}
.buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #eee;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s;
}
.buttons button:hover {
    background-color: #ddd;
}
#display {
    width: 90%;
    padding: 10px;
    font-size: 20px;
    text-align: right;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 5px 5px 0 0;
}
</style>
</head>
<body>
<div class="calculator">
  <input type="text" id="display" readonly placeholder="0">
  <div class="buttons">
    <button class="number" value="7">7</button>
    <button class="number" value="8">8</button>
    <button class="number" value="9">9</button>
    <button class="operator" value="+">+</button>
    <button class="number" value="4">4</button>
    <button class="number" value="5">5</button>
    <button class="number" value="6">6</button>
    <button class="operator" value="-">-</button>
    <button class="number" value="1">1</button>
    <button class="number" value="2">2</button>
    <button class="number" value="3">3</button>
    <button class="operator" value="*">*</button>
    <button class="number" value="0">0</button>
    <button class="number" value=".">.</button>
    <button class="operator" value="/">/</button>
    <button class="equal" value="=">=</button>
    <button class="clear" value="C">C</button>
  </div>
</div>
</body>
<script>
document.addEventListener('DOMContentLoaded', function() {  
    const display = document.getElementById('display');  
    const buttons = document.querySelectorAll('.buttons button');  
    let currentNumber = '0'; 
    let previousNumber = '';  
    let currentOperation = null;  
  
    buttons.forEach(button => {  
        button.addEventListener('click', function() {  
            const value = this.value;  
  
            if (value === 'C') {   
                currentNumber = '0';  
                previousNumber = '';  
                currentOperation = null;  
                display.value = currentNumber;  
            } else if (value === '=') {  
                if (currentOperation) {  
                    let result;  
                    switch (currentOperation) {  
                        case '+':  
                            result = parseFloat(previousNumber) + parseFloat(currentNumber);  
                            break;  
                        case '-':  
                            result = parseFloat(previousNumber) - parseFloat(currentNumber);  
                            break;  
                        case '*':  
                            result = parseFloat(previousNumber) * parseFloat(currentNumber);  
                            break;  
                        case '/':  
                            if (currentNumber !== '0') {  
                                result = parseFloat(previousNumber) / parseFloat(currentNumber);  
                            } else {  
                                alert('除数不能为0');  
                                return;  
                            }  
                            break;  
                    }  
                    display.value = result.toString();  
                    previousNumber = result.toString();  
                    currentNumber = '';  
                    currentOperation = null;  
                }  
            } else if (!isNaN(value) || value === '.') {  
                if (value === '.' && currentNumber.includes('.')) {  
                    return;  
                }  
                currentNumber = currentNumber === '0' && currentNumber.length === 1 ? value : currentNumber + value;  
                display.value = currentNumber;  
            } else {  
                if (currentOperation === null) {  
                    previousNumber = currentNumber;  
                    currentNumber = '0';
                }  
                display.value = previousNumber + ' ';
                currentOperation = value; 
            }  
        });  
    });  
});
</script>
</html>